<!--
 * @Author: zhayang
 * @LastEditors: zhayang 1063975710@qq.com
 * @Date: 2024-07-02 21:25:24
 * @LastEditTime: 2024-07-04 11:30:57
 * @Description: 合集详情
-->
<template>
  <div class="app-container fit bg-#fff column relative">
    <div class="sreies-card h-240 p-20 flex full-w border-b border-b-#E0E0E0">
      <div class="flex-1 flex">
        <img
          class="w-150 h-200 m-r-20 rd-4"
          :src="data.icon"
        />
        <div class="col p-y-12 relative">
          <div class="text-#1C1F23 text-14 line-height-16 font-600 m-b-8">
            {{ data.title }}
          </div>
          <div class="text-#6A6B6C text-12 line-height-14 m-b-8 ellipsis">
            {{ data.intro }}
          </div>
          <div class="text-#6A6B6C text-12 line-height-14 m-b-8">
            更新至第{{ data.videos.length }}集
          </div>
        </div>
      </div>
      <div class="flex-1 flex justify-end items-start">
        <el-button
          size="small"
          @click="back"
        >
          返回
        </el-button>
        <el-button
          size="small"
          :loading="loading"
          @click="deleteSeries"
        >
          删除合集
        </el-button>
        <el-button
          size="small"
          :loading="loading"
          @click="edit"
        >
          修改信息
        </el-button>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          :loading="loading"
          @click="addVideo"
        >
          添加视频
        </el-button>
      </div>
    </div>
    <div class="video-area h-col p-y-20 overflow-hidden">
      <div class="fit overflow-auto">
        <div
          v-for="item in data.videos"
          :key="item.id"
          class="video-card h-240 full-w p-20 flex"
        >
          <img
            class="w-150 h-200 m-r-20 rd-4"
            :src="item.cover_url"
          />
          <div class="col p-y-12 relative">
            <div class="text-#1C1F23 text-14 line-height-16 font-600 m-b-8">
              {{ item.title }}
            </div>
            <div class="text-#6A6B6C text-12 line-height-14 m-b-8">
              发布时间 ：{{ item.create_datetime }}
            </div>
            <div class="text-#9E9E9E text-12 line-height-14">
              <span
                class="iconfont icon-guankan eye-icon"
                title="播放次数"
              ></span>
              <span class="m-l-8">{{ item.play_count }}</span>
            </div>
            <div
              class="ful--w absolute bottom-12 left-0 text-#9E9E9E text-12 line-height-14 items-center edit-info"
            >
              <div
                class="flex items-center cursor-pointer"
                @click.stop="deleteVideo(item.id)"
              >
                <div class="iconfont icon-x edit-icon text-#FF3F40"></div>
                <div class="m-l-8 text-#FF3F40">从当前合集删除</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSeriesDetails, deleteSingleSeries, unlinkSeries } from '@/api/video'
import { Loading } from 'element-ui'
export default {
  components: {},
  data() {
    return {
      data: {
        id: '',
        icon: '',
        title: '',
        create_datetime: '',
        intro: '',
        videos: []
      },
      loading: false
    }
  },
  created() {
    if (this.$route?.query?.uid) {
      const id = this.$route.query?.uid || ''
      this.getData(id)
    }
  },
  methods: {
    back() {
      this.$router.replace({
        path: 'video-manage'
      })
    },
    getData(id) {
      const loadingInstance = Loading.service()
      this.loading = true
      getSeriesDetails({ id })
        .then((res) => {
          if (res && res.code === 0) {
            this.data = res.data
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
        .finally(() => {
          this.loading = false
          this.$nextTick(() => {
            loadingInstance.close()
          })
        })
    },
    // 删除单一合集
    deleteSeries() {
      this.$confirm('确定删除该合集?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 删除接口
          deleteSingleSeries({
            id: this.data.id
          })
            .then((res) => {
              if (res && res.code === 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.$router.go(-1)
              }
            })
            .catch(() => {
              this.$message({
                type: 'warning',
                message: '删除失败，请重试'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    addVideo() {
      this.$router.push({
        path: 'add-video',
        query: { uid: this.data.id }
      })
    },
    // 编辑合集
    edit() {
      this.$router.push({
        path: 'edit-series',
        query: { uid: this.data.id }
      })
    },
    deleteVideo(id) {
      this.$confirm('确定从当前合集删除该视频?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 删除接口
          unlinkSeries({
            video_id: id,
            series_id: this.data.id
          })
            .then((res) => {
              if (res && res.code === 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.getData(this.data.id)
              }
            })
            .catch(() => {
              this.$message({
                type: 'warning',
                message: '删除失败，请重试'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.eye-icon {
  font-size: 12px !important;
}
.edit-info {
  display: none;
}
.video-card {
  &:hover {
    background-color: #f4f5f9;
    transition: all 0.5s;
    .edit-info {
      display: flex;
      transition: all 0.5s;
    }
  }
}
</style>
